<template>
  <div class="bottom-operate">
    <div class="bottom-placeholder" :style="bottomPlaceholderStyle"></div>
    <div ref="box" class="operate">
      <slot></slot>
      <div class="operate-box">
        <div class="operate-info">
          <el-row :gutter="10" align="middle">
            <el-col :span="12">
              <div class="operate-count">
                共计：<span class="operate-count--selectPrice">{{ $numberPriceDisplay(selectPrice) }}</span>
                <span class="operate-count--number">已选择 <span class="operate-count--number-txt">{{ selectCount }}</span>
                  件商品</span>
              </div>
            </el-col>
            <el-col :span="12" style="text-align: right;">
              <el-button type="primary" color="#D6000F" class="bottom-btn" :loading="loading" @click="handleSubmit">{{ btnTxt
                }}</el-button>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="bottomOperate">
const props = defineProps({
  selectCount: {
    type: Number,
    default: 0
  },
  selectPrice: {
    type: Number,
    default: 0
  },
  btnTxt: {
    type: String,
    default: ''
  },
  loading: {
    type: Boolean,
    default: false
  }
});
const bottomHeight = ref(0);
const bottomPlaceholderStyle = computed(() => {
  return {
    height: bottomHeight.value - 52 + 'px'
  };
});
onMounted(() => {
  bottomHeight.value = document.querySelector('.operate').offsetHeight;
});
onUpdated(() => {
  bottomHeight.value = document.querySelector('.operate').offsetHeight;
});
const emit = defineEmits(['submit']);
const handleSubmit = () => {
  emit('submit');
};
</script>

<style lang="scss" scoped>
.bottom-placeholder {
  margin-top: 56px;
}
.operate {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  right: 0;

  &-box {
    background-color: #FFFFFF;
  }

  &-info {
    margin: 0 auto;
    width: var(--box-width);
  }

  &-count {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: var(--jbc-font-size-extra-large);
    color: var(--jbc-font-color);
    line-height: 27px;

    &--selectPrice {
      color: var(--jbc-color);
      font-size: 30px;
      line-height: 40px;
    }

    &--number {
      display: inline-block;
      color: var(--text-color);
      font-size: var(--jbc-font-size-medium);
      font-weight: normal;
      line-height: 21px;
      background-color: #F8F8F8;
      border-radius: 19px;
      margin-left: 20px;
      padding: 8px 20px;
    }

    &--number-txt {
      font-weight: bold;
      color: var(--jbc-color);
    }
  }

  .bottom-btn {
    --el-border-radius-base: 0;
    padding: 22px 73px;
    height: 86px;
    font-size: 24px;
    line-height: 42px;
    z-index: 99999999;
    position: relative;
  }
}
</style>